<template>
  <div class="topic">
    <div class="topic_concent">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{$store.state.topicDetail.title}}</span>
        </div>
        <div v-html="$store.state.topicDetail.content" class="el-card-content"></div>
      </el-card>
    </div>
    <div class="topic_sidebar">
      <!-- 作者信息卡片 start -->
      <el-card class="box-card noReData">
        <div slot="header" class="clearfix">
          <span>作者</span>
        </div>
        <router-link :to="`/user/${userDetail.loginname}`">
        <img :src="userDetail.avatar_url" alt="" style="width:48px;height:48px;">
        <span>{{userDetail.loginname}}</span>
        </router-link>
        <div>积分:{{userDetail.score}}</div>
      </el-card>
      <!-- 作者信息卡片 end -->

      <!-- 作者的其他话题 start -->
      <el-card class="box-card noReData">
        <div slot="header" class="clearfix">
          <span>作者的其他话题</span>
        </div>
        <div v-for="(item,index) in userDetail.recent_topics" class="noReData">
          <router-link :to="`/topic/${item.id}`">{{item.title}}</router-link>
        </div>
      </el-card>
      <!-- 作者的其他话题 end -->

      <!-- 无人回复卡片 start -->
      <el-card class="box-card noReData">
        <div slot="header" class="clearfix">
          <span>无人回复</span>
        </div>
        <div v-for="(item,index) in noReData" class="noReData">
          <router-link :to="`/topic/${item.id}`">{{item.title}}</router-link>
        </div>
      </el-card>
      <!-- 无人回复卡片 end -->
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request/request";
import { getDateDiff, renderTime, retryFunc } from "../../utils/utils";
export default {
  data(){
    return{
      topicDetail:'',
      noReData:'',
      userDetail:''
    }
  },
  props: ["id"],
  //组件内路由导航
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate(to,from,next){
        console.log(to,from,next)
        if(to.fullPath!=from.fullPath){
            next()
            this.$router.go(0);
            
        }
    },
  mounted() {
    request({
      url: `topic/${this.id}`,
    })
      .then((res) => {
        this.topicDetailHandle(res.data.data);
        
      })
      .catch((err) => {
        console.log(err);
      });
      
      //获取sessionStoeage里的无人回复数据
      this.noReData=JSON.parse(sessionStorage.getItem("noReData"));
      // console.log(this.noReData);
      
  },
  methods:{
    //获取到的数据的处理方法，将这些数据返回到 topicDetail 中
      topicDetailHandle(res){
        console.log(res);
        request({    //获取用户数据，用来放到侧边栏的个人信息和作者其他话题里
          url: `user/${res.author.loginname}`,
          })
          .then((user) => {
          console.log(user.data.data);
          this.userDetail=user.data.data;
          this.$store.commit("setUserDetail",user);
          })
          .catch((err) => {
            console.log(err);
          });
        //把获取的数据传到vuex上的topicDetail
        this.$store.commit("setTopicDetail",res);
      }
  }
};
</script>


<style lang="less">
@import "./index.less";
</style>